import React, { useState } from 'react';
import { Tag, Button } from 'antd';

const DataCache = () => {
    const [count, setCount] = useState(0);
    const [num, setNum] = useState(10000);

    const totalPrimes = () => {
        console.log('打印。。。计算函数是否重新执行了一遍计算');
        let total = 0;
        //这是一段“比较复杂的计算代码”即可
        for (let i = 1; i <= num; i++) {
            let boo = true;
            for (let j = 2; j < i; j++) {
                if (i % j === 0) {
                    boo = false;
                    break;
                }
            }
            if (boo && i !== 1) {
                total++;
            }
        }
        //复杂的计算代码到此结束

        return total;//将质数总和作为返回值return出去
    };

    return (
        <div>
            <Tag color='green'>数字发生更新：{count}</Tag>
            <br /><br />
            <Tag color='gold'>复杂计算的值：{totalPrimes()}</Tag>
            <br /><br />
            <Button type='primary' onClick={() => setCount(count => count + 1)}>
                点击发生更新，是否需要重新计算
            </Button>
            <br /><br />
            <Button type='primary' onClick={() => setNum(num => num + 1)}>
                点击更新num值，重新执行
            </Button>
        </div>
    )
};
export default DataCache;